<template>
  <div class="app-container">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm grid grid-cols-2 gap-x-100"
      label-position="top"
    >
      <el-form-item
        label="套餐名称："
        prop="comboMealName"
        class="flex flex-col"
      >
        <el-input
          v-model="ruleForm.comboMealName"
          placeholder="请输入"
          maxlength="10"
        ></el-input>
        <span class="custom-placeholder">显示给顾客看的套餐名称</span>
      </el-form-item>
      <el-form-item
        label="会员等级名称："
        prop="memberLevel"
        class="flex flex-col"
      >
        <el-input
          v-model="ruleForm.memberLevel"
          placeholder="请输入"
          maxlength="20"
        ></el-input>
        <span class="custom-placeholder">顾客购买套餐后的会员等级名称</span>
      </el-form-item>
      <el-form-item
        label="会员有效天数："
        prop="memberDay"
        class="flex flex-col"
      >
        <el-input
          v-number-input
          v-model="ruleForm.memberDay"
          placeholder="请输入"
          maxlength="5"
        ></el-input>
        <span class="custom-placeholder">为0则永久有效，建议为0</span>
      </el-form-item>
      <el-form-item label="套餐定价：" prop="comboMealAmount">
        <el-input
          v-number-input="2"
          v-model="ruleForm.comboMealAmount"
          placeholder="请输入"
          maxlength="10"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="会员账户余额返现："
        prop="backMoney"
        class="flex flex-col"
      >
        <el-input v-model="ruleForm.backMoney" v-number-input="2" placeholder="请输入"></el-input>
        <span class="custom-placeholder">
          购买套餐后给顾客返的余额，默认与套餐定价一致
        </span>
      </el-form-item>
      <el-form-item
        label="会员账户余额抵扣比例："
        prop="payProportion"
        class="flex flex-col"
      >
        <el-input
          v-number-input
          v-model="ruleForm.payProportion"
          placeholder="请输入"
          maxlength="10"
        ></el-input>
        <span class="custom-placeholder">
          后续顾客到店消费使用账户余额时的可抵扣比例
        </span>
      </el-form-item>
      <el-form-item label="是否开启消费返现功能：" prop="cashbackStatus">
        <el-switch
          v-model="ruleForm.cashbackStatus"
          active-value="1"
          inactive-value="0"
        ></el-switch>
      </el-form-item>
      <el-form-item label="是否开启裂变拉新功能：" prop="inviteStatus">
        <el-switch
          v-model="ruleForm.inviteStatus"
          active-value="1"
          inactive-value="0"
        ></el-switch>
      </el-form-item>
      <el-form-item
        label="每次消费返现的比例："
        prop="cashbackProportion"
        v-if="ruleForm.cashbackStatus == 1"
        class="flex flex-col"
      >
        <el-input
          v-number-input
          v-model="ruleForm.cashbackProportion"
          placeholder="请输入"
          maxlength="10"
        ></el-input>
        <span class="custom-placeholder">
          顾客实际支付金额按比例返现到账户余额
        </span>
      </el-form-item>
      <el-form-item
        v-number-input
        label="裂变拉新分佣的比例："
        prop="memberInvite"
        v-if="ruleForm.inviteStatus == 1"
        class="flex flex-col"
      >
        <el-input
          v-model="ruleForm.memberInvite"
          placeholder="请输入"
          maxlength="10"
        ></el-input>
        <span class="custom-placeholder"
          >老顾客拉新顾客购买会员套餐按比例分佣到账户余额</span
        >
      </el-form-item>
      <el-form-item label="套餐介绍：" prop="comboPhoto">
        <el-input v-model="ruleForm.comboPhoto" v-show="false" />
        <ImageUpload
          :value="ruleForm.comboPhoto"
          :limit="1"
          @input="handleFileSuccess"
        />
      </el-form-item>
    </el-form>
    <div class="bottom">
      <el-button type="primary" @click="submitForm('ruleForm')">
        确认提交
      </el-button>
    </div>
  </div>
</template>

<script>
import {
  addSysComboMealAPI,
  updateSysComboMealAPI,
  getSysComboMealListAPI,
} from "@/api/system/member";
export default {
  data() {
    return {
      ruleForm: {
        comboMealName: "",
        memberLevel: "",
        memberDay: "",
        comboMealAmount: "",
        backMoney: "",
        payProportion: "",
        cashbackStatus: 0,
        inviteStatus: 1,
        cashbackProportion: "",
        memberInvite: "",
        comboPhoto: "",
      },
      rules: {
        comboMealName: [
          {
            required: true,
            min: 1,
            max: 20,
            message: "套餐名称必填，限输入20个字",
            trigger: "blur",
          },
        ],
        memberLevel: [
          {
            required: true,
            min: 1,
            max: 20,
            message: "会员等级名称必填，限输入20个字",
            trigger: "blur",
          },
        ],
        memberDay: [
          {
            required: true,
            min: 1,
            max: 5,
            message: "会员有效天数必填，限输入5个字符",
            trigger: "blur",
          },
        ],
        comboMealAmount: [
          {
            required: true,
            min: 1,
            max: 10,
            message: "套餐定价必填，限输入10个字符",
            trigger: "blur",
          },
        ],
        backMoney: [
          {
            required: true,
            message: "会员账户余额返现必填，限输入10个字符",
            trigger: "blur",
          },
          
        ],
        payProportion: [
          {
            required: true,
            min: 1,
            max: 10,
            message: "会员账户余额抵扣比例必填，限输入10个字符",
            trigger: "blur",
          },
        ],
        cashbackProportion: [
          {
            required: true,
            min: 1,
            max: 10,
            message: "每次消费返现比例必填，限输入10个字符",
            trigger: "blur",
          },
        ],
        memberInvite: [
          {
            required: true,
            min: 1,
            max: 10,
            message: "裂变拉新分佣比例必填，限输入10个字符",
            trigger: "blur",
          },
        ],
        comboPhoto: [
          {
            required: true,
            message: "套餐介绍必传",
            trigger: "change",
          },
        ],
      },
    };
  },
  watch: {
    ruleForm: {
      handler(newVal, oldVal) {
        if (newVal.cashbackStatus == 0) {
          this.ruleForm.cashbackProportion = "";
        }
        if (newVal.inviteStatus == 0) {
          this.ruleForm.memberInvite = "";
        }
      },
      deep: true,
    },
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      getSysComboMealListAPI().then((res) => {
        if (res.code === 200) {
          if (res.rows.length == 0) {
            this.ruleForm = {
              comboMealName: "",
              memberLevel: "",
              memberDay: "",
              comboMealAmount: "",
              backMoney: "",
              payProportion: "",
              cashbackStatus: 0,
              inviteStatus: 0,
              cashbackProportion: "",
              memberInvite: "",
              comboPhoto: "",
            };
          } else {
            this.ruleForm = res.rows[0];
            // this.ruleForm.cashbackStatus =
            //   res.rows[0].cashbackStatus == "false" ? false : true;
            // this.ruleForm.inviteStatus =
            //   res.rows[0].inviteStatus == "false" ? false : true;
          }
        }
      });
    },
    // 文件上传成功处理
    handleFileSuccess(response) {
      this.ruleForm.comboPhoto = response;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid, errorObj) => {
        if (valid) {
          console.log(this.ruleForm);
          if (this.ruleForm.id != undefined) {
            updateSysComboMealAPI(this.ruleForm).then((res) => {
              if (res.code == 200) {
                this.getList();
                this.$modal.msgSuccess("操作成功");
              } else {
                this.$modal.msgSuccess(res.msg);
              }
            });
          } else {
            addSysComboMealAPI(this.ruleForm).then((res) => {
              if (res.code == 200) {
                this.getList();
                this.$modal.msgSuccess("操作成功");
              } else {
                this.$modal.msgSuccess(res.msg);
              }
            });
          }
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.grid {
  display: grid;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.custom-placeholder {
  margin-top: 12px;
}

.gap-x-100 {
  column-gap: 100px;
}

.gap-y-24 {
  row-gap: 24px;
}

.bottom {
  display: flex;
  justify-content: center;
}

.avatar-uploader {
  margin-left: 80px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px dashed #8c939d;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
